import './index.less';

import React from 'react';
import {inject, observer} from 'mobx-react';
import {Button} from 'antd';
import {WeaLocaleProvider, WeaRightMenu, WeaTop} from 'ecCom';
import AdvanceSearch from './AdvanceSearch';
import AnalyseEchart from './AnalyseEchart';
import FlowAnalyseCount from '../report-public/flow-analyse-count/index';
import ReportNoRight from '../report-public/report-no-right/index';
import FlowReportDetail from '../report-public/flow-report-detail/index';

const getLabel = WeaLocaleProvider.getLabel;

@inject('wfTypeAnalyseStore')
@observer
export default class Main extends React.Component {
    constructor(props) {
        super(props);

        const {wfTypeAnalyseStore} = props;
        const {initDatas} = wfTypeAnalyseStore;
        initDatas && initDatas();
    }

    componentWillUnmount() {
        const {reSet} = this.props.wfTypeAnalyseStore;
        reSet && reSet();
    }

    componentWillReceiveProps(nextProps) {
        if(this.props.location.key !== nextProps.location.key) {
            const { wfTypeAnalyseStore } = this.props;
            wfTypeAnalyseStore.clearStatus();
            wfTypeAnalyseStore.initDatas();
        }
    }

    render() {
        const {wfTypeAnalyseStore} = this.props;
        const {loading = false, advanceSearchData, advanceSearchPara, analyseData, iswf = false, modalParams} = wfTypeAnalyseStore; //data
        const {updateAdvanceSearchPara, showModal, closeModal,updateModalPara} = wfTypeAnalyseStore; //action
        const {noRight = false, bottomInfo = ''} = advanceSearchData;
        const {eChartDatas = [], countData = []} = analyseData;

        return (
            <div className="wf-type-analyse">
                {noRight ?
                    <ReportNoRight ecId={`${this && this.props && this.props.ecId || ''}_ReportNoRight@ujuv8h`}/>
                    :
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@vishng`} loading={loading} icon={<i className='icon-coms-workflow'/>} buttons={this.getButtons()}
                            iconBgcolor='#0079DE' title={getLabel(388253,'流程量分析')} showDropIcon={false}>
                        <AdvanceSearch ecId={`${this && this.props && this.props.ecId || ''}_AdvanceSearch@tmb6i2`} updateAdvanceSearchPara={updateAdvanceSearchPara}
                                       advanceSearchData={advanceSearchData} advanceSearchPara={advanceSearchPara}
                                       iswf={iswf}/>
                        <FlowAnalyseCount ecId={`${this && this.props && this.props.ecId || ''}_FlowAnalyseCount@faiidt`} datas={countData} showDetailModal={showModal}/>
                        <AnalyseEchart ecId={`${this && this.props && this.props.ecId || ''}_AnalyseEchart@pb2cjr`} loading={loading} eChartDatas={eChartDatas}
                                       showModal={showModal}/>
                        <FlowReportDetail ecId={`${this && this.props && this.props.ecId || ''}_FlowReportDetail@1ibhjp`} closeModal={closeModal} updateModalPara={updateModalPara} {...modalParams}/>
                        <div className='count-bottom'>{bottomInfo}</div>
                    </WeaTop>
                }
            </div>
        )
    }

    getButtons() {
        const {wfTypeAnalyseStore} = this.props;
        const {iswf = false, goBack} = wfTypeAnalyseStore;
        let btns = [];
        if (iswf) {
            btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vzgzug@return`} type="primary" onClick={() => {
                goBack();
            }}>{getLabel(1290,'返回')}</Button>);
        }
        return btns;
    }
}
